<script setup lang="ts">
import type { RenderContent } from '@arco-design/web-vue/es/_utils/types'
import type { DnsAddressPoolListItem } from '@/apis/model/dns'
import { Message } from '@arco-design/web-vue'
import {
  deleteDnsAuthorityGtmAddressPoolApi,
  getDnsAuthorityGtmAddressPoolsApi,
} from '@/apis/modules/dns'
import { commonTableProps } from '@/utils/table'
import EditDrawer from './components/EditDrawer.vue'
import useConfig from './useConfig'

const { tableColumns } = useConfig()
const route = useRoute()
const router = useRouter()
const queryParams = ref({ name_keyword: '', type: 1 })

const { loading, pagination, data, run } = useListRequest(
  getDnsAuthorityGtmAddressPoolsApi,
  {
    params: queryParams,
    immediate: true,
  },
)
const {
  visible: editDialogVisible,
  open: openEditDialog,
  data: editDialogData,
} = usePopup()

// 删除地址池
function handleDelete(record: DnsAddressPoolListItem) {
  ModalHelper.error({
    title: '删除地址池',
    content: h('div', null, [
      '确定要删除 “',
      h('span', { class: 'text-[#FA5566]' }, `${record.name || '-'}`),
      '” 地址池吗？',
    ]) as unknown as RenderContent,
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteDnsAuthorityGtmAddressPoolApi({ id: record.id })
      await run()
      Message.success('删除成功')
    },
  })
}

const { createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(queryParams)
function handleReload(flag: boolean) {
  if (flag)
    return run()
  router.replace({
    name: 'DnsAddressPoolManagement',
    params: { module: 'static' },
  })
  run()
}
onMounted(() => {
  if (route.query.type === 'open') {
    openEditDialog()
  }
})
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <div class="mb-4 flex justify-between">
      <section class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditDialog()"
        >
          新建地址池
        </a-button>
        <a-input-search
          v-model="queryParams.name_keyword"
          placeholder="请输入地址池名称搜索"
          class="!w-58"
          allow-clear
          @clear="run()"
          @search="run()"
          @keydown.enter="run()"
        />
      </section>
      <a-button
        class="ml-auto shrink-0 text-color-1"
        type="outline"
        :disabled="loading"
        @click="run"
      >
        <template #icon>
          <i-icons-refresh :class="{ 'animate-spin': loading }" />
        </template>
      </a-button>
    </div>
    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      @sorter-change="onSorterChange"
    >
      <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openEditDialog(record)"
        >
          <i-icons-edit size="16px" />
        </a-link>
        <a-link
          :hoverable="false"
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>
  <edit-drawer
    v-model:visible="editDialogVisible"
    :record="editDialogData"
    @reload="handleReload"
  />
</template>

<style scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}
</style>
